Visualization in Software

Prelude

Jonathan Llovet

  • Software Engineer, Linguist, Philosopher

jllovet.com

Jonathan Llovet

School

  • BA from St. John’s College, studied Philosophy and History of Math and Science
  • Enrolled in MS in CS at Towson University
  • Summer Language School in Hebrew at Middlebury University
  • Coursework at Indiana Univ. East in Math
  • Other language programs - classical and modern

jllovet.com

Jonathan Llovet

Work

  • Solutions Architect and Cybersecurity Manager at Inspire Brands
  • Founder and CEO of Opening Questions, where I’m building a language learning app for Ancient Greek called Talk with Albert
  • Formerly worked as a consultant in Identity and Access Management
  • Writing a book on Philosophy of Computer Science: Algorithmics - The Being of Becoming

jllovet.com

Why Talk About Visualization?

What is Computation?

Application of Algorithmics

  • Study of change and becoming, sister of calculus
  • Transformation of initial state to a subsequent state
  • Sometimes with side effects

Modeling and Analogy

  • Exploration (Questions & Discussions)
  • Instrumentalization (Means to an End)
  • Commodification (Product)

At their core:

  • Communication and Collaboration

We should be concerned with:

  • Rhetoric
  • Effective Presentation

Our Audiences

  • The Computer
  • Other Software Engineers
  • Colleagues
  • Customers
  • Ourselves

Effective Communication

  • Fundamental aspects of our cognition:
    • Space and Time

  • Frame communication around these

    • Allow audience to explore concepts spatially
    • Tell a story

Enter, Graphviz

Hello, Graphviz!

digraph g {
  a -> b
}

g a a b b a->b

  • Declarative graph-generation
  • Plain text files ending in .dot
  • Processed by CLI or another tool

Hello, Graphviz!

digraph g {
  rankdir=LR
  a -> b
}

g a a b b a->b

  • Easy modification and iteration
  • Effective for collaboration
  • VSCode Plugin for live updates

Graphviz Resources

Basic Usage

mygraph.dot

digraph g {
  a -> b
}

Generate a PNG

dot -Tpng mygraph.dot -o mygraph.png

Scale the PNG

dot -Tpng mygraph.dot -s=10 -o mygraph.png

Export to SVG

dot -Tsvg mygraph.dot -o mygraph.svg

Nodes

Edges

Subgraphs

A Reprise on Rhetoric and Storytelling

  • Use analogies from reading
  • Weak form of Sapir Whorf
  • Majority of world languages
    • (notable exceptions: Hebrew, Arabic)

Structure Narrative

  • Left-to-Right
  • Top-to-Bottom
  • Clockwise

Styling

Challenges Presented by Styling

  • Analogous to CSS
  • No built-in variable support

Possible Solutions

  • Possible Solutions
  • Preprocessors
  • IDE Snippets

More Robust Solutions

  • Wrappers in other languages
    • Python
    • Go
    • Javascript

Uses and Integration with Tools

  • Read from DB to Dynamically Generate Graphs
  • Integrate into documentation
  • Real-time collaboration

Add to

  • READMEs
  • Plain-Text Knowledge Management Systems

Obsidian

  • Knowledge management system built-around plain-text
  • Uses text processing of markdown files
  • https://obsidian.md/

Obsidian Inline Graphviz

Obsidian Community Plugins - Graphviz

Obsidian Graph View

Obsidian Graph View - Filtered to Tag

Other Visualizations

Enter, Mermaid

Hello, Mermaid

  • Other visualization tasks
  • Frequent native support in Markdown tools
  • Different rendering style, implications for complicated graphs

Example: Sequence Diagrams

  • Sequence diagrams

Obsidian Inline Mermaid